<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<title>Switch</title>
		<link href="../../../themes/iphone/iphone.css" rel="stylesheet"/>

		<script type="text/javascript" src="../../../../../dojo/dojo.js" data-dojo-config="parseOnLoad: true"></script>

		<style>
		.color1 .mblSwitchBgLeft {
			background: -webkit-gradient(linear, left top, left bottom, from(#28B159), to(#75FBAC), color-stop(0.5, #3FEB84), color-stop(0.5, #4CEE8E));
		}
		.color1 .mblSwitchBgRight {
			background: -webkit-gradient(linear, left top, left bottom, from(#CECECE), to(#FDFDFD), color-stop(0.5, #EEEEEE), color-stop(0.5, #F8F8F8));
		}
		.color2 .mblSwitchBgLeft {
			background: -webkit-gradient(linear, left top, left bottom, from(#FF9D00), to(#FFCE80), color-stop(0.5, #FFBB4D), color-stop(0.5, #FFC871));
		}
		.color2 .mblSwitchBgRight {
			background: -webkit-gradient(linear, left top, left bottom, from(#CECECE), to(#FDFDFD), color-stop(0.5, #EEEEEE), color-stop(0.5, #F8F8F8));
		}
		.color1 .mblSwitchKnob,
		.color2 .mblSwitchKnob {
			background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#FAFAFA), color-stop(0.5, #BBBBBB), color-stop(0.5, #CACACA));
		}
		.float {
			float: left;
			margin-right: 10px;
		}
		.bold {
			font-weight: bold;
		}
		</style>

		<script language="JavaScript" type="text/javascript">
			//dojo.require("dojo.parser"); // Use the lightweight parser.
			dojo.require("dojox.mobile.parser");
			dojo.require("dojox.mobile");
			dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");

	        dojo.require("doh.runner");

		</script>
		<script type="text/javascript" src="Switch.js"></script>
	</head>
	<body style="padding:15px;visibility:visible">
		<div dojoType="dojox.mobile.View" selected="true">
			<div dojoType="dojox.mobile.RoundRect" shadow="true">
				<span class="bold">Default Shape</span><br>
				<div class="float" dojoType="dojox.mobile.Switch" value="off"></div>
				<div dojoType="dojox.mobile.Switch" value="on" leftLabel="Start" rightLabel="Stop"></div>
			</div>

			<div dojoType="dojox.mobile.RoundRect" shadow="true">
				<span class="bold">Round Shape 1</span><br>
				<div class="mblSwRoundShape1 float" dojoType="dojox.mobile.Switch" value="off"></div>
				<div class="mblSwRoundShape1 color1" dojoType="dojox.mobile.Switch" value="on" leftLabel="Start" rightLabel="Stop"></div>
			</div>

			<div dojoType="dojox.mobile.RoundRect" shadow="true">
				<span class="bold">Round Shape 2</span><br>
				<div class="mblSwRoundShape2 float" dojoType="dojox.mobile.Switch" value="off"></div>
				<div class="mblSwRoundShape2 color2" dojoType="dojox.mobile.Switch" value="on" leftLabel="Start" rightLabel="Stop"></div>
			</div>

			<div dojoType="dojox.mobile.RoundRect" shadow="true">
				<span class="bold">Arc Shape 1</span><br>
				<div class="mblSwArcShape1 float" dojoType="dojox.mobile.Switch" value="off"></div>
				<div class="mblSwArcShape1 color1" dojoType="dojox.mobile.Switch" value="on" leftLabel="Start" rightLabel="Stop"></div>
			</div>

			<div dojoType="dojox.mobile.RoundRect" shadow="true">
				<span class="bold">Arc Shape 2</span><br>
				<div class="mblSwArcShape2 float" dojoType="dojox.mobile.Switch" value="off"></div>
				<div class="mblSwArcShape2 color2" dojoType="dojox.mobile.Switch" value="on" leftLabel="Start" rightLabel="Stop"></div>
			</div>
		</div>
	</body>
</html>
